<template>
    <div class="setpassword">
    <nav-bar>设置密码</nav-bar>
    <form>
        <div :class="{ active: active == 1 }">
            <input type="text" placeholder="请输入手机号" @blur="active = ''" @focus="active = 1" v-model="mobile" />
            <div style="width: 260px" v-if="flag" @click="sendcode">获取验证码</div>
    
            <div v-else style="width: 360px; color: #999">
                获取验证码({{ timer }})
            </div>
        </div>
    
        <div :class="{ active: active == 2 }">
            <input type="text" placeholder="请输入短信验证码" @blur="active = ''" @focus="active = 2" v-model="sms_code" />
        </div>
    
        <div :class="{ active: active == 3 }">
            <input type="text" placeholder="请输入密码" @blur="active = ''" @focus="active = 3" v-model="password" />
        </div>
    
        <div class="login" @click="setPassword">
            <p>确定</p>
        </div>
    </form>
    </div>
</template>

<script>
const reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
import { getSmsCode, setUserPassword } from "@/http/login";
export default {
 data(){
    return {
        active:"",
        mobile:"",
        sms_code:"",
        password:"",
        flag:true,
        timer: 60,
    }
 },
 methods:{
     async sendcode(){
         if (!reg.test(this.mobile)) {
             this.$Toast.fail("不是手机号");
         } else {
             this.flag = false;
             const res = await getSmsCode({
                 mobile: this.mobile,
                 sms_type: "getPassword",
             });
             const t = setInterval(() => {
                 if (this.timer > 0) {
                     this.timer--;
                 } else {
                     this.timer = 60;
                     this.flag = true;
                     clearInterval(t);
                 }
             }, 1000);
         }
     },

     async setPassword() {
         const res = await setUserPassword({
             mobile: this.mobile,
             sms_code: this.sms_code,
             password: this.password
         })
         console.log("修改密码后", res);
     }
 }
}
</script>

<style lang="scss">
.logo {
    width: 100vw;
    height: 200px;
    text-align: center;

    img {
        width: 525px;
        height: 115px;
        margin: 50px;
    }
}

form {
    margin-top: 8vh;
    font-size: 30px;

    >div {
        width: 80vw;
        display: flex;
        justify-content: space-between;
        // padding: 0 50px;
        margin: 50px auto;
    }

    input {
        border: none;
        width: 100%;
    }
}

.active {
    border-bottom: 1px solid red;
}

.login {
    width: 50vw;
    height: 50px;
    border-radius: 20px;
    background: url("@/assets/theme-img/login-btn.png") no-repeat 100%;

    p {
        margin:  auto;
    }
}
</style>
